import { Component, OnInit, Input, ChangeDetectorRef, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { tap } from 'rxjs/operators';
import { AddComponent } from './add/add.component';
import { isNgTemplate } from '@angular/compiler';
import { MySelection } from 'app/modules/base/selection';

// new window['HACKER'].viewmodel({
//   bindRoute: '/zone',
// styles() {
//   return this.html`
//   $$ *{
//   color:red;
//   }
//   `
// },
//   onReady() {

//   }
// })

@Component({
  selector: 'm-base-tree',
  templateUrl: './base-tree.component.html',
  styleUrls: ['./base-tree.component.scss'],
})
export class BaseTreeComponent implements OnInit, AfterViewInit {
  @Input() data = null;
  @Output() dataChange = new EventEmitter();
  @Input() parent = null;
  @Input() goDetail = true;
  @Input() selectBox = false
  JSON_stringify = JSON.stringify;
  @Output() roll = new EventEmitter();
  @Output() item = new EventEmitter();
  @Input() selection;
  @Input() expansion = false;
  @Input() id = undefined
  isOpen = false;
  checked = false;
  arr = []
  checkedlist = []
  constructor(private cdf: ChangeDetectorRef, private http: HttpClient, public dialog: MatDialog) {

  }

  ngAfterViewInit() {

  }
  ngOnInit() {
    // 默认是否展开第一级
    if (this.expansion) {
      this.loadData(this.data[0], 0)
    }
  }
  select(e) {
    if (!this.selection.multiple) {
      this.item.emit([e]);
    }
    if (this.selection.multiple) {
      this.selectCheckbox()
    }

  }

  // goItem() {}



  // addNode(item) {
  //   const dialogRef = this.dialog.open(AddComponent, {
  //     width: '500px',
  //     data: item,
  //   });

  //   dialogRef.afterClosed().subscribe((result) => {
  //     console.log(result);
  //   });
  // }

  selectCheckbox() {
    if (this.selection.multiple) {
      this.selection.clear();
      this.checkedlist = []
      this.checkboxfor(this.data);
      this.selection.select(...this.checkedlist)
      this.item.emit(this.checkedlist)
    }

  }
  checkboxfor(e) {
    e.forEach(element => {
      if (element.checked) {
        this.checkedlist.push(element)
      }
      let item = element;

      if (item.children) {
        this.checkboxfor(item.children)
      }
    });
  }

  //加载更多
  loadMore(item, i) {
    let params = {
      parent_id: item[i].parent_id,
      offset: item.length,
      limit: '50',
      admin_id: this.id
    };
    this.http
      .get('api/admin/batch_areas', {
        params: params,
      })
      .pipe(
        tap(() => {
          item.loading = false;
          this.cdf.detectChanges();
        }),
      )
      .subscribe((res: any) => {
        item = item.push(...res.message);
        this.cdf.detectChanges();
      });
  }

  //展开数据
  loadData(item, i) {
    for (let i = 0; i < this.data.length; i++) {
      delete this.data[i].children;
    }
    item.loading = true;
    let params = {
      parent_id: item.id,
      offset: '0',
      limit: '50',
      admin_id: this.id
    };
    let result = this.http
      .get('api/admin/batch_areas', {
        params: params,
      })
    console.log('result--:', result)
    result.pipe(
      tap(() => {
        item.loading = false;
        this.cdf.detectChanges();
      }),
    )
      .subscribe((res: any) => {
        item.children = res.message;

        // this.data.splice(i, 1);
        // this.data.unshift(item);
        this.data[i] = item


        this.roll.emit('0');
        this.cdf.detectChanges();
      });
  }

  close(item) {
    delete item.children;
    this.cdf.detectChanges();
  }

  srocllTop(e) {
    this.roll.emit('0');
  }
}
